<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">提现列表</div>
    </div>
    <div class="banner">
      <div class="search">
        <Input type="text" placeholder="手机号/钱包地址" style="width:200px;" v-model="searchData" @keyup.enter.native="keyset($event)" />
        <span style="margin-left:30px;font-size:15px;line-height:15px;vertical-align: -3px;font-weight: bold;">处理状态：</span>
        <Select v-model="selectDataState" style="width:200px;margin-left:5px;" @on-change="changSelect">
          <Option :value="item.value" :label="item.label" v-for="(item,index) in selectList" :key="index"></Option>
        </Select>
        <Button type="primary" style="margin-left:20px;" @click="ensureAction">确定</Button>
      </div>
      <!-- <div class="all">
        <span v-if="storjCashAll">Stroj历史提现总额：{{storjCashAll}}</span>
        <span class="mf f_16" v-else>Stroj历史提现总额：---</span>
        <span class="mf f_16" v-if="storjBalanceAll">Stroj当前所有用户余额：{{storjBalanceAll}}</span>
        <span class="mf f_16" v-else>Stroj当前所有用户余额：---</span>
        <span class="mf f_16" v-if="plcCashAll">PLC历史提现总额：{{plcCashAll}}</span>
        <span class="mf f_16" v-else>PLC历史提现总额：---</span>
        <span class="mf f_16" v-if="plcBalanceAll">PLC当前所有用户余额：{{plcBalanceAll}}</span>
        <span class="mf f_16" v-else>PLC当前所有用户余额：---</span>
      </div> -->
      <div class="table">
        <Table :columns="columnsData" :data="userShowData" :border="true" :loading="isLoading"></Table>
        <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total placement="top" @on-change="handlePage" style="margin-top:20px;"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";

export default {
  name: "Cash",
  data() {
    return {
      isLoading: false,
      searchData: "",
      storjCashAll: "1111111",
      storjBalanceAll: "2222222222",
      plcCashAll: "2222222222",
      plcBalanceAll: "",
      selectDataState: "3",
      selectList: [
        {
          value: "1",
          label: "已处理"
        },
        {
          value: "0",
          label: "未处理"
        },
        {
          value: "3",
          label: "全部"
        }
      ],
      columnsData: [
        {
          title: "申请日期",
          key: "applyTime",
          align: "center",
          width: 250
        },
        {
          title: "手机号",
          key: "userMobile",
          align: "center",
          width: 150
        },
        {
          title: "用户钱包地址",
          key: "cashWallet",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.userShowData[params.index].cashWallet,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.userShowData[params.index].cashWallet)
              )
            ]);
          }
        },
        {
          title: "币种",
          key: "coinTypeName",
          align: "center",
          width: 150
        },
        {
          title: "余额",
          key: "balanceAmount",
          align: "center",
          width: 150
        },
        {
          title: "提现请求数",
          key: "applyAmount",
          align: "center",
          width: 150
        },
        {
          title: "操作",
          align: "center",
          width: 100,
          render: (h, params) => {
            let con;
            let showData;
            if (params.row.auditStatus == 1) {
              showData = "已提现";
              con = Boolean(true);
            } else {
              (showData = "提现"), (con = Boolean(false));
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    value: "primary",
                    label: "small",
                    disabled: con
                  },
                  on: {
                    click: () => {
                      this.cash(params);
                    }
                  }
                },
                showData
              )
            ]);
          }
        }
      ],
      userShowData: [],
      pageTotal: 0,
      pageNum: 1,
      pageSize: 20,
      token: ""
    };
  },
  mounted() {
    this.getCashList(0);
  },
  watch: {
    searchData: function(value, odlValue) {
      if (!value) {
        let cond = {};
        cond = this.require();
        this.getCashList(0, cond);
      }
    }
  },
  methods: {
    //token过期检测
    tokenCheck() {
      this.token = this.$localStorage.storageGet("TOKEN");
      if (!this.token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
    },
    //////////////表格////////////
    getCashList(pageNum, cond) {
      this.tokenCheck();
      let url = "";
      if (!cond) {
        url =
          apis.cashList + "?" + "page=" + pageNum + "&size=" + this.pageSize;
      } else {
        url =
          apis.cashList + "?" + "page=" + pageNum + "&size=" + this.pageSize;
        if (cond.keyword) {
          url = url + "&keyword=" + cond.keyword;
        }
        if (cond.status != "3") {
          url = url + "&status=" + cond.status;
        }
      }
      console.log(url);
      this.isLoading = true;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          if (res.status == 200) {
            this.isLoading = false;
            this.userShowData = res.data;
            this.userShowData.forEach(element => {
              if (element.coinType == 1) {
                element.coinTypeName = "STORJ";
              } else if (element.coinType == 2) {
                element.coinTypeName = "PLC";
              } else if (element.coinType == 3) {
                element.coinTypeName = "UT";
              } else if (element.coinType == 4) {
                element.coinTypeName = "FIL";
              }
            });
            this.pageTotal = parseInt(res.headers["x-total-count"]);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    handlePage(num) {
      this.pageNum = num;
      this.getCashList(this.pageNum - 1, this.require());
      console.log(this.pageNum);
    },
    //表格提现
    cash(params) {
      this.$Modal.confirm({
        title: "确认提现信息",
        content: "<div>确认给《" + params.row.userMobile + "》提现</div>",
        onOk: () => {
          let url = apis.cashSure + params.row.id;
          console.log(params.row.id);
          this.$axios({
            method: "put",
            url: url,
            headers: {
              Authorization: "Bearer " + this.token
            }
          })
            .then(res => {
              console.log(res);
              if (res.status == 200) {
                this.$Message.info("已提现");
                let cond = this.require();
                this.getCashList(0, cond);
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消提交");
        }
      });
    },
    //////////////////搜索//////////////////////
    //条件搜索限制
    require() {
      let cond = {};
      if (this.searchData) {
        cond.keyword = this.searchData;
      }
      if (this.selectDataState) {
        cond.status = this.selectDataState;
      }
      return cond;
    },
    //确认搜索框
    ensureAction() {
      //搜索函数
      this.getCashList(0, this.require());
    },
    //选择框搜索
    changSelect(value) {
      this.getCashList(0, this.require());
    },
    hideWord(string) {
      string = String(string);
      let len = string.length;
      let stringBefore = string.slice(0, 11);
      let stringBeHand = string.slice(len - 10, len + 1);
      let newString = stringBefore + "..." + stringBeHand;
      return newString;
    },
    //键盘事件
    keyset(ev) {
      if (ev.keyCode == 13) {
        let cond = this.require();
        this.getCashList(0, cond);
      }
    }
  },
  created() {
    window.addEventListener("beforeunload", e => {
      localStorage.reLoad = "reLoadCash";
      localStorage.name = "1-5";
    });
  }
};
</script>
<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.banner {
  margin-top: 20px;
}

.title {
  color: #666;
  font-size: 24px;
}

.table {
  margin-top: 20px;
}
.mf {
  margin-left: 20px;
}
.all {
  margin-top: 20px;
  font-size: 18px;
}
</style>